'use client';

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import Link from 'next/link';
import { Calendar, Activity } from 'lucide-react';

export function ActivitiesContent() {
  return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
      <Card className="md:col-span-2 lg:col-span-2">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Calendar className="h-5 w-5" />
            最新活动
          </CardTitle>
          <CardDescription>班级最新活动和精彩瞬间</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid gap-4 md:grid-cols-2">
            <div className="bg-muted rounded-lg overflow-hidden">
              <div className="aspect-video relative bg-muted">
                <img
                  src="/placeholder.jpg"
                  alt="班级活动照片"
                  className="object-cover w-full h-full"
                />
              </div>
              <div className="p-4">
                <h4 className="font-medium mb-1">趣味运动会</h4>
                <p className="text-sm text-muted-foreground mb-2">
                  同学们在运动会上展现出了良好的体育精神和团队协作能力。
                </p>
                <div className="flex justify-between items-center text-xs text-muted-foreground">
                  <span>三年级二班</span>
                  <span>2024-03-18</span>
                </div>
              </div>
            </div>
            <div className="bg-muted rounded-lg overflow-hidden">
              <div className="aspect-video relative bg-muted">
                <img
                  src="/placeholder.jpg"
                  alt="班级活动照片"
                  className="object-cover w-full h-full"
                />
              </div>
              <div className="p-4">
                <h4 className="font-medium mb-1">科学实验课</h4>
                <p className="text-sm text-muted-foreground mb-2">
                  同学们在实验课上认真观察，记录实验数据，表现出浓厚的探索精神。
                </p>
                <div className="flex justify-between items-center text-xs text-muted-foreground">
                  <span>三年级二班</span>
                  <span>2024-03-15</span>
                </div>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Calendar className="h-5 w-5" />
            活动日历
          </CardTitle>
          <CardDescription>近期活动安排</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="flex items-center gap-4 bg-muted p-3 rounded-lg">
              <div className="w-12 h-12 rounded-lg bg-primary/10 flex flex-col items-center justify-center">
                <span className="text-sm font-bold">3月</span>
                <span className="text-lg font-bold">25</span>
              </div>
              <div className="flex-1">
                <p className="font-medium">春游活动</p>
                <p className="text-sm text-muted-foreground">地点：植物园</p>
              </div>
            </div>
            <div className="flex items-center gap-4 bg-muted p-3 rounded-lg">
              <div className="w-12 h-12 rounded-lg bg-primary/10 flex flex-col items-center justify-center">
                <span className="text-sm font-bold">3月</span>
                <span className="text-lg font-bold">28</span>
              </div>
              <div className="flex-1">
                <p className="font-medium">艺术节表演</p>
                <p className="text-sm text-muted-foreground">地点：学校礼堂</p>
              </div>
            </div>
            <div className="flex items-center gap-4 bg-muted p-3 rounded-lg">
              <div className="w-12 h-12 rounded-lg bg-primary/10 flex flex-col items-center justify-center">
                <span className="text-sm font-bold">4月</span>
                <span className="text-lg font-bold">1</span>
              </div>
              <div className="flex-1">
                <p className="font-medium">班级主题活动</p>
                <p className="text-sm text-muted-foreground">地点：教室</p>
              </div>
            </div>
            <Button asChild variant="outline" className="w-full">
              <Link href="/parent/activities/calendar">查看活动日历</Link>
            </Button>
          </div>
        </CardContent>
      </Card>

      <Card className="lg:col-span-2">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Activity className="h-5 w-5" />
            活动剪影
          </CardTitle>
          <CardDescription>精彩活动照片墙</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            {[1, 2, 3, 4].map((i) => (
              <div key={i} className="aspect-square rounded-lg overflow-hidden bg-muted">
                <img
                  src="/placeholder.jpg"
                  alt={`活动照片 ${i}`}
                  className="object-cover w-full h-full hover:scale-105 transition-transform"
                />
              </div>
            ))}
          </div>
          <Button asChild className="w-full mt-4">
            <Link href="/parent/activities/gallery">查看更多照片</Link>
          </Button>
        </CardContent>
      </Card>
    </div>
  );
} 